<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>cbnu jquery</title>
		<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
		<style>
	body{
		color: white;
		font-family:cat;}
	h2{
		color:#99CCCC;
		font-size:20px;}
	p{
		font-size:14px;}
	div#slideAll{
		background:#333;
		width:626px;
		height:190px;
		margin: 50px auto 0 auto;}
	div#slideItems{
	  	height:150px;
		padding:20px;	}
	div#slideItems div{
		position:absolute;
		width:586px;}	
	div#slideItems img {
		float:left;
		margin-right:13px;}
	ul#slideAllCount{
		width:626px;
		margin: 0px auto 0 auto;
		padding-right:20px;}
	ul#slideAllCount li.slide{
		float:right;
		cursor:pointer;
		width:25px;
		height:18px;
		display:block;	}
	ul#slideAllCount li.slide span{
		margin-top: 4px;
		display:block;
		width:12px;
		height:12px;
		background: #999;
		text-indent:9999px;
		border-radius:6px;}
	ul#slideAllCount li.slide span:hover{
		background: #222;}
	ul#slideAllCount li.slide.selectedTab span{
		background: #99CCCC;}

		</style>
	</head>
	<body>	

		<div id="slideAll">
			<div id="slideItems">
				<div>
					<a href="http://www.choongang.co.kr"><img alt="" src="image/cbnu12.png" border="0" /></a>
					<h2>jQuery(제이쿼리)</h2>
					<p>충북대학교는 IT전문가를 양성하는 교육의 도시 최고대학입니다.</p>
				</div>
				<div>
					<a href="http://wwww.choongang.co.kr"><img alt="" src="image/cbnu13.png" border="0" /></a>
					<h2>jQuery UI(제이쿼리) UI</h2>
					<p>충북대학교는 IT전문가를 양성하는 교육의 도시 최고대학입니다.</p>
				</div>
				<div>
					<a href="http://www.choongang.co.kr"><img alt="" src="image/cbnu14.png" border="0" /></a>
					<h2>충북대학교는 IT전문가를 양성하는 교육의 도시 최고대학입니다.</p>
				</div>
			</div>
		</div>



		<script type="text/javascript">
			$(function(){

				$('#slideItems div').hide();

				var current = -1;
				var prev = null;
				var interval = null;
				var FADE_SPEED = 500;
				var DELAY_SPEED = 5000;
				var slides = $('#slideItems div');
				var html = '<ul id="slideAllCount">'

				for (var i = slides.length - 1; i >= 0 ; i--){
					html += '<li id="slide'+ i+'" class="slide"><span>'+(i+1)+'</span></li>' ;
				}
				html += '</ul>';

				// <ul id="slideAllCount">
				//   <li class="slide" id="slide2"><span>3</span></li>
				//   <li class="slide" id="slide1"><span>2</span></li>
				//   <li class="slide" id="slide0"><span>1</span></li>
				// <//ul>

				$('#slideAll').after(html);



				for (var i = slides.length - 1; i >= 0 ; i--){
					$('#slide'+i).bind("click",{index:i},function(event){
						current = event.data.index;	
						gotoSlide(current);
					});
				};


				autoSlide();

				function autoSlide (){
					if (current >= slides.length -1){
						current = 0;
					}else{
						current++
					}
					gotoSlide(current);	
				}




				function gotoSlide(current){
					if (current != prev){
						$('#slide'+current).addClass('selectedTab');
						$('#slide'+prev).removeClass('selectedTab');

						$(slides[prev]).stop().hide();
						$(slides[current]).stop().slideDown(FADE_SPEED);

						prev = current;


						if (interval != null){
							clearInterval(interval);
						}
						interval = setInterval(autoSlide, DELAY_SPEED);
					}
				}
			});
		</script>
     </body>
</html>